<template>
  <VPage>
    <div class="mx-[10px]">
      <el-tabs v-model="activeName">
        <el-tab-pane label="国家管理" name="1"></el-tab-pane>
        <el-tab-pane label="邮编管理" name="2"></el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName == 1">
      <Country :optionsData="optionsDataAll" />
    </template>
    <template v-else>
      <PostCode :optionsData="optionsDataAll" />
    </template>
  </VPage>
</template>
<script setup lang="jsx">
import Country from "./components/country/index";
import PostCode from "./components/postCode/index";
import { useEnumSelect } from "@/hooks/useEnumSelect.js";
import { zipCodeRegion } from "./api";
import { getCountry } from "@/api/index.js";
import { overallOptions } from "@/api/public";
const activeName = ref('1')
const { options: optionsData1 } = useEnumSelect({
  params: ["zip_code_match"],
});
const optionsData2 = ref({})
const getOption = async () => {
  const { data } = await overallOptions({
    params: ["map.region"],
  });
  let _options = data["mapRegion"];
  if (_options) {
    optionsData2.value = data;
  }
};
getOption()
const optionsData = ref({});
const getZipCodeRegion = async () => {
  const { data } = await zipCodeRegion();
  optionsData.value.zipRegion = data || [];
};
getZipCodeRegion();
const getCountrylist = async () => {
  const { data } = await getCountry();
  optionsData.value.country = data || [];
};
getCountrylist();
const optionsDataAll = computed(() =>
  Object.assign({}, optionsData.value, optionsData1.value,optionsData2.value)
);
</script>
<style scoped lang="scss">
:deep(.el-tabs__header) {
  margin: 0;
}
</style>
